<template>
	<!-- 价格 -->
	<view class="text-bold money-box" :style="{
			color:color
		}">
		<text :class="fontSize.small" class="u-margin-right-6">￥</text>
		<text v-for="(item,index) in priceArr" :key="index" :class="index==0 ? fontSize.big : fontSize.small">{{item}}</text>
	</view>
</template>

<script>
	import { BigNumber } from "bignumber.js";
	BigNumber.config({ FORMAT: {groupSeparator:'',decimalSeparator:'.'} })
	export default {
		name:"money",
		props: {
			//价格
			price: {
				type: [Number,String],
				default: 0
			},
			//颜色
			color:{
				type:String,
				default:''
			},
			//设置字体大小 小字体比大字体小8rpx
			size: {
				type: [Number,String],
				default: 30
			},
		},
		computed: {
			priceArr() {
				if(isNaN(this.price)){
					return ['0','.','00']
				}
				const priceStr = BigNumber(this.price).toFormat(2);
				const priceArr = priceStr.split('.')
				priceArr.splice(1,0,'.')
				return priceArr;
			},
			fontSize(){
				return {
					big:`u-font-${this.size}`,
					small:`u-font-${this.size - 8}`
				}
			}
		},
	}
</script>